<template>
  <div class="nav_outer">
    <header id="header" class="yui-bar">
        <a href="" class="yui-bar-back" @click="goback"></a>
        <div class="bar_input flex_auto">
          <img src="../assets/img/fangdajing@2x.png" alt="">
          <input type="text" placeholder="闻泰通讯" v-model="text">
        </div>
        <span class="yui-bar-btn" @click="search">搜索</span>
    </header>
     <div class="jobs" id="searchjobs">
      <div class="job" v-for="item in joblists" v-bind:key="item.id" :data-id="item.id">
        <p class="job_title">{{item.title}}</p>
        <p class="job_tag">
          <span v-for="jtag in (item.positionTags.split(','))" v-bind:key="jtag">{{jtag}}</span>
        </p>
        <div class="flex_bet">
          <span class="job_price">{{item.salaryTips}}元/月</span>
          <span class="common_statu" v-if="item.marketingType==0">入职奖</span>
        </div>
        <div class="jobtags flex_bet">
          <div><span v-for="tag in (item.welfareTags.split(','))" v-bind:key="tag">{{tag}}</span></div>
          <div class="corner">{{item.cityName}}·{{ (item.updateDate || item.createDate) | today}}</div>
        </div>
      </div>
      <div class="refresh"></div>
    </div>
    <div class="search_records" v-if="hasrecords">
        <p>搜索历史</p>
        <div class="flex_auto" style="flex-wrap:wrap;">
          <div class="search_tag" v-for="(item,index) in records" v-bind:key="index" @click="torecordsSearch(item)">{{item}}</div>
        </div>
    </div>
    <p class="tcenter" style="margin:0.65rem 0px 0.85rem;color:#333;" v-if="!joblists.length && !hasrecords && showSorry">对不起,没有找到相关岗位</p>
    <div class="jobs" v-show="!joblists.length">
      <div class="jobs_recomend">
        <div style="background: #dcdcdc;height:1px"></div>
        <span>为您推荐</span>
      </div>
      <div class="job" v-for="item in recomendlists" v-bind:key="item.id" :data-id="item.id" @click="toJobdetail(item)">
        <p class="job_title">{{item.title}}</p>
        <p class="job_tag">
          <span v-for="jtag in (item.positionTags.split(','))" v-bind:key="jtag">{{jtag}}</span>
        </p>
        <div class="flex_bet">
          <span class="job_price">{{item.salaryTips}}元/月</span>
          <span class="common_statu" v-if="item.marketingType==0">入职奖</span>
        </div>
        <div class="jobtags flex_bet">
          <div><span v-for="tag in (item.welfareTags.split(','))" v-bind:key="tag">{{tag}}</span></div>
          <div class="corner">{{item.cityName}}·{{ (item.updateDate || item.createDate) | today}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      totalPage: 1,
      text: '',
      loading: false,
      joblists: [],
      pullre:null,
      recomendlists:[],
      hasrecords: false,
      records: [],
      showSorry: false
    }
  },
  mounted() {
    let mui = this.mui,that = this;
    this.interactive.reachBottomLoad({
     callback: function(){
       if(that.loading){
          return;
      }
      that.pageNum+=1;
      that.loadjobs();
    }});
    mui("#searchjobs").on("tap", ".job", function() {
        var id = this.getAttribute("data-id");
        that.$router.replace({ path: "/gangwei/" + id });
      });
  },
  created(){
    // this.text = this.$route.query.text;
    // this.loadjobs();
    this.loadRecomends();
    let serecords = localStorage.getItem('searchRecords');
    serecords && (this.records = serecords.split('_')) && (this.hasrecords = true);
  },
  methods: {
    toJobdetail(item){
      this.$router.replace({ path: "/gangwei/" + item.id });
    },
    goback(event){
      event.preventDefault();
      this.$router.back(-1);
    },
    torecordsSearch(txt){
      this.text = txt;
      this.search();
    },
    search(){
      this.pageNum = 1;
      this.hasrecords = false;
      this.loadjobs();
      if(this.indexValue(this.records,this.text)<0){
        if(this.records.length<5){
          this.records.push(this.text)
        }else{
          this.records.splice(0,this.records.length-4);
          this.records.push(this.text);
        }
        localStorage.setItem('searchRecords',this.records.join('_'));
      }
    },
    indexValue (arr,str) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == str) {
          return i;
        }
      }
      return -1;
    },
    loadjobs(){
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http2.get("/mobile/enrollment/page", {
        current: that.pageNum,
        size: that.pageSize,
        searchContent:this.text || '',
        cityName: this.$store.state.locate || '苏州',
        status: 1
      }).then(
        res => {
          if(that.pageNum==1){
            that.joblists = res.object
          }else{
            that.joblists = that.joblists.concat(res.object);
          }
          that.totalPage = res.totalPage || 1;
          that.loading = false;
          that.showSorry = true;
        },
        () => {
          that.loading = false;
          that.showSorry = true;
        }
      );
    },
    loadRecomends(){
      this.Http2.get("/mobile/enrollment/page", {
        current: 1,
        size: 50,
        cityName: this.$store.state.locate || '苏州',
        status: 1
      }).then(
        res => {
          this.recomendlists = res.object
        }
      );
    }
  },
  components: {
 
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .nav_outer{
    background: #fff;
    padding-top: px2em(145);
  }
  #header{
    padding-top: px2em(77);
    box-sizing: content-box;
    .yui-bar-back,.yui-bar-btn{
      top: px2em(77);
    }
  }
  .bar_input{
      flex: 1;
      background: #F5F5F5;
      margin: 0.1rem px2em(140);
      height: 1rem;
      img{
        width: px2em(35);
        height: px2em(35);
        vertical-align: middle;
        margin: 0 px2em(18);
      }
      >input{
        flex: 1;
        height: 100%;
        padding: 0;
        color: #333;
        font-size: 15px;
      }
      >input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
        color: #999;
      }
    }
  .jobs{
    padding: px2em(30);
    background: #fff;
    .job{
      border-bottom: 1px solid #eee;
      padding-bottom: px2em(30);
      >p{
        margin-bottom: 5px;
      }
    }
    .jobs_title{
      padding-left: 0.5em;
      border-left: 6px solid #507DF4;
    }
    .jobs_recomend{
      padding: px2em(20);
      margin-bottom: 0.4rem;
      position: relative;
      >span{
        position: absolute;
        display: inline-block;
        width: px2em(196);
        line-height: px2em(40);
        text-align: center;
        background: #fff;
        left: 50%;
        margin-left: - px2em(98);
        top: 0;

      }
    }
    .job_title{
      font-size: 1.2em;
      margin-top: 10px; 
      color: #333;
    }
    .job_price{
      font-size: 1.2em;
      color: red;
    }
    .jobtags{
      margin-top: px2em(30);
      .corner{
        color: #aaa;
        font-size:0.9em;
      }
    }
    .jobtags span{
      height: px2em(40);
      border-radius: px2em(23);
      line-height: px2em(40);
      color: #00B9FF;
      border: 1px solid #00B9FF;
      padding: 3px 5px;
      font-size: 0.8em;
      margin-right: 6px;
    }
  }
  .search_records{
    padding: 0 px2em(30) px2em(30);
    color: #333;
    >p{
      color: #333;
      margin-bottom: .5rem;
    }
    .search_tag{
      font-size: 0.8em;
      height: px2em(50);
      line-height: px2em(50);
      padding: 0 px2em(20);
      background: #efefef;
      border-radius: px2em(25);
      margin-right: px2em(20);
      margin-bottom: .2rem;
    }
  }
</style>